s<template>
	<view class="demo-tabs">
		<cl-tabs v-model="current" :labels="labels" :border="false">
			<!-- 自定义内容区域 -->
			<swiper class="container" @change="onChangeSwiper" :current="current">
				<swiper-item v-for="(item, index) in list" :key="index">
					<!-- 是否预加载 -->
					<template v-if="item.loaded || index == current">
						<cl-scroller :ref="`scroller-${index}`" @down="onDown" @up="onUp">
							<!-- 首次加载框，可有可无 -->
							<cl-loading-mask :loading="loading" text="加载中">
								<!-- 列表 -->
								<view class="list">
									<!-- 渲染的数据 -->
									<view class="task-list" v-for="(item2, index2) in datass" :key="index2">
										<view class="task-list-project">
											<!-- 头像 -->
											<view class="project-avatar">
												<image class="image-style" :src="'../../static/black.jpg'" mode=""></image>
											</view>
											<!-- 项目信息 -->
											<view class="project-info item-flex2">
												<view class="project-info-title">333333{{item.title}}</view>
												<view class="project-info-startime">开始时间：{{item.startTime}}</view>
												<view class="project-info-duration">项目时长：{{item.duration}}</view>
											</view>
											<!-- 状态 -->
											<view class="project-status item-flex1">
												<view class="status">{{item.satusText?item.satusText:"状态" }}</view>
												<view class="views-details" @click="goTo(123456)">查看详情</view>
											</view>
											<!-- 分割线 -->
											<cl-divider class="cl-divider-style" />
										</view>
									</view>
									<!-- 加载更多 -->
									<cl-loadmore v-if="item.data.length > 0" :loading="item.loading" :finish="item.finished" :divider="false"></cl-loadmore>
								</view>
							</cl-loading-mask>
						</cl-scroller>
					</template>
				</swiper-item>
			</swiper>
		</cl-tabs>
		<tabBar :pagePath="'/pagesB/taskhall/taskhall'" :type='2'></tabBar>
	</view>
</template>

<script>
	export default {
		name: "PageBTaskHall",
		data() {
			const labels = [{
				label: "热门",
				value: 1,
				loaded: true
			}];

			const list = labels.map(e => {
				console.log('e', e)
				return {
					...e,
					status: e.value,
					data: [],
					finished: false,
					loading: false,
					pagination: {
						page: 1,
						size: 20
					}
				};
			});
			console.log('list', list)
			return {
				current: 0,
				labels,
				list,
				loading: true,
				datass: [],
			};
		},

		created() {
			console.log("任务大厅", this.labels)
		},
		mounted() {
			this.refresh();
		},
		methods: {

			// 下拉刷新
			onDown() {
				console.log('onDown',this.$refs[`scroller-${this.current}`])
				this.refresh({
					page: 1
				}).done(() => {
					this.$refs[`scroller-${this.current}`][0].end();
				});
			},

			// 上拉加载更多
			onUp() {
				console.log('onUp')
				const {
					pagination,
					finished
				} = this.list[this.current];

				if (!finished) {
					this.refresh({
						page: pagination.page + 1
					});
				}
			},

			// 左右滑动触发事件
			onChangeSwiper(e) {
				console.log('e', e)
				this.current = e.detail.current;

				if (!this.list[this.current].loaded) {
					this.loading = true;
					this.list[this.current].loaded = true;
				}

				setTimeout(() => {
					this.refresh({
						page: 1
					});
				}, 500);
			},

			// 请求数据
			refresh(params = {}) {
				console.log('...argm', params)
				const item = this.list[this.current];

				let data = {
					...item.pagination,
					status: item.status,
					sort: "desc",
					order: "createTime",
					...params
				};
				
				return new Promise(resolve => {
					item.loading = true;

					console.log("Refresh");

					setTimeout(() => {
						item.data = new Array(data.page == 1 ? 10 : data.page * 10).fill(1);
						item.pagination.page = data.page;
						item.finished = false;
						item.loading = false;
						this.loading = false;
						resolve();
					}, 500);
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		// #ifdef H5
		height: 100%;
		// #endif

		// #ifndef H5
		height: 100vh;
		// #endif
	}

	.task-hall {
		width: 100%;
		height: 100%;

		.top {
			height: 100%;
		}
	}

	.demo-tabs {
		height: 100%;
		overflow: hidden;

		.container {
			height: calc(100% - 110rpx);
			background-color: #f7f7f7;
		}

		.list {
			padding: 20rpx;

			/deep/.cl-list-item {
				margin-bottom: 20rpx;
				border-radius: 10rpx;
			}

			// 每一项
			.task-list {
				margin: 20rpx;
				height: 172upx;
				// background-color: pink;

				// 布局
				.task-list-project {
					// background-color: $subject-bgc;
					width: 100%;
					height: 152rpx;
					display: flex;
					// border-bottom: 1rpx solid #d8d9dc;
					// flex-direction:row;  // 布局方向 x轴从左至右
					// flex-wrap:nowrap;  // 换行 不换行
					flex-flow: row nowrap; // 是以上的简写形式
					justify-content: flex-start; // 在主轴的对其方式 从左往右
					align-items: center; // 交叉轴上如何对齐 默认占满
					position: relative;

					.project-avatar {
						padding-left: 10rpx;
						flex: 0.8;

						.image-style {
							width: 130rpx;
							height: 130rpx;
							border-radius: 12rpx;
							margin: auto 0;
						}
					}

					.project-info {
						height: 100%;
						position: relative;

						// 标题
						.project-info-title {
							font-size: 32rpx;
							position: absolute;
							top: 8rpx;
							color: rgba(0, 0, 0, 0.76);
						}

						// 开始时间 
						.project-info-startime {
							font-size: 24rpx;
							position: absolute;
							top: 64rpx;
							color: $text-color;
						}

						// 时长
						.project-info-duration {
							font-size: 24rpx;
							position: absolute;
							top: 102rpx;
							color: $text-color;
						}

						// 空闲时间信息
						.project-info-message {
							font-size: 24rpx;
							color: $text-color;
							padding: 10rpx 40rpx 0 10rpx;
						}
					}

					// 项目状态
					.project-status {
						height: 100%;
						position: relative;

						// 状态
						.status {
							color: $subject-bgc;
							font-size: 32rpx;
							position: absolute;
							top: 10rpx;
							left: 74rpx;
						}

						// 查看详情
						.views-details {
							color: $text-color;
							font-size: 24rpx;
							position: absolute;
							top: 100rpx;
							left: 74rpx;
						}
					}

					// 设置分割线位置
					.cl-divider-style {
						padding: 0 10rpx 0 10rpx;
						position: absolute;
						top: 128rpx;
						left: 0rpx;
						right: 0rpx;
						bottom: 0rpx;
					}
				}
			}
		}
	}

	.cl-tabs__bar-box {
		display: flex;
	}

	.cl-tabs__bar-item {
		flex: 1;
	}

	.cl-list-item__container {
		background-color: skyblue;
	}


	.item-flex1 {
		flex: 1;
	}

	.item-flex2 {
		flex: 2;
	}

	.item-flex3 {
		flex: 3;
	}
</style>
